<template>
  <div style="width:180px;background:#9cadb9">
    <div class="wrap" style="width: 100%;
    display: flex;
    justify-content: space-evenly;">
      <div class="left" style="flex: 1.6;
    display: flex;">
        <div class="left-bar" style="width: 2px;
    height: 60px;
    background-color: #00704E;"></div>
        <div class="content" style="font-size: 14px;
    color: #fff;
    padding-left: 8px;">
          <div class="title">配电室</div>
          <div class="nub" style="font-size: 30px;">03</div>
        </div>
      </div>
      <div class="right" style="margin-left: 0px;
    margin-top: 28px;
    font-size: 12px;
    flex:3.8;
    overflow:hidden;">
        <div class="item" v-for="item in data" :key="item.id" style="display: flex;
    align-items: center;
    padding-bottom: 5px;
    justify-content:space-between;">
          <div style="padding-bottom: 4px;
    color: #00704E;
    width:60px;
    white-space:nowrap;
    border-bottom: 2px solid #00704E;"><div style="transform: scale(0.75);transform-origin: left center;">{{item.name}}</div></div>
          <div style="padding-bottom: 4px;color: #fff;
    border-bottom: 2px solid #00CC84;
    margin-left:6px;
    flex:0.5;"><div style="transform: scale(0.75);transform-origin: center;">{{item.data}}KW</div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          name: "高压配电室",
          data: 100000
        },
        {
          name: "低压配电室01",
          data: 100000
        },
        {
          name: "低压配电室02",
          data: 10000
        }
      ]
    };
  }
};
</script>
<style>
/*
.wrap{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}
.left{
    flex: 1;
    display: flex;
}
.left .left-bar{
    width: 2px;
    height: 60%;
    background-color: #00704E;
}
.content{
    font-size: 14px;
    color: #fff;
    padding-left: 8px;
}
.left .content .nub{
    font-size: 30px;
}
.right{
    margin-left: -2px;
    margin-top: 28px;
    font-size: 12px;
    flex: 2.8;
}
.right .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6px;
}
.right .item > div{
    padding-bottom: 4px;
}
.right .item > div:first-child{
    width: 47%;
    color: #00704E;
    padding-right: 7px;
    border-bottom: 2px solid #00704E;
}
.right .item > div:last-child{
    color: #fff;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: 2px solid #00CC84;
    text-align: center;
}*/
</style>